<template>
    <div class="container">
        <div class="row">
            <div class="col">
                <Form class="mt-4" :model="category" label-position="top">
                    <FormItem label="父级分类">
                        <Cascader :data="categories" v-model="category.parent_id" change-on-select clearable placeholder="请选择父分类"></Cascader>
                    </FormItem>
                    <FormItem label="Order">
                        <Input type='email' v-model="category.order" placeholder="请输入Order"></Input>
                    </FormItem>
                    <FormItem label="Name">
                        <Input type="text" v-model="category.name" placeholder="请输分类名称"></Input>
                    </FormItem>
                    <FormItem label="Slug">
                        <Input type="text" v-model="category.slug" placeholder="请输Slug"></Input>
                    </FormItem>
                </Form>
            </div>
        </div>
        <Button @click="create">保存</Button>
    </div>
</template>

<script>
    export default {
        name: "CategoryEdit",
        mounted() {
            this.id = this.$route.params.id;
            this.getCategories();
            this.getCategory();
        },
        methods: {
            getCategories() {
                http.get('/api/category',{
                    params:{
                        with_level:true
                    }
                }).then((data)=>{
                    let cates  = data;
                    cates.forEach((item)=>{
                        let category = {};
                        this.categories.push(category);
                        if (item.children.length == 0) {
                            category.value = item.id;
                            category.label = item.name;
                        } else {
                            this.buildParams(item,category)
                        }
                    });
                    console.log(this.categories)
                });
            },
            buildParams(item,category) {
                category.value = item.id;
                category.label = item.name;
                if (item.children.length > 0) {
                    item.children.forEach((child)=>{
                        let c = {};
                        c.value = child.id;
                        c.label = child.name;
                        if(!category.children) {
                            category.children = []
                        }
                        category.children.push(c);
                        this.buildParams(child, c)
                    });
                }

            },
            getCategory() {
                http.get('/api/category/'+this.id).then((data)=>{
                    this.category = data;
                });
            },
            create() {
                let params = new URLSearchParams();
                params.append('name',this.category.name);
                params.append('parent_id',this.category.parent_id.pop());
                params.append('slug',this.category.slug);
                params.append('order',this.category.order);
                http.put('/api/category/'+this.id,params).then((data)=>{


                });
            }
        },
        data() {
            return {
                id:'',
                loading: false,
                category: {},
                categories: []
            }
        }
    }
</script>

<style scoped>

</style>
